{% extends '../_base.html' %}

{% block nav %} /discuss {% endblock %}

{% block title %}{{ _('Discuss') }}{% endblock %}

{% block meta %}
    <meta property="og:type" content="webpage" />
    <meta property="og:url" content="http://{{ __request__.host }}/discuss/{{ board.id }}/{{ topic.id }}" />
    <meta property="og:title" content="{{ topic.name }}" />
    <meta property="og:description" content="{{ topic.name }}" />
{% endblock %}

{% block head %}
    {% set __sidebar_right__ = true %}

<style>
.x-topic-visible {
    display: block;
}
</style>

<script id="tplReplyArea" type="text/plain">
        <div class="x-display-if-signin">
            <p><button id="reply-make-button" type="button" class="uk-button uk-button-primary"><i class="uk-icon-reply"></i> Make a Reply</button></p>
            <form id="reply-form" class="uk-form" style="display:none;">
                <fieldset>
                    <div class="uk-alert uk-alert-danger" style="display:none"></div>
                    <div class="uk-form-row">
                        <label>Reply: {{ topic.name }}</label>
                    </div>
                    <div class="uk-form-row">
                        <label>Content:</label>
                    </div>
                    <div class="uk-form-row x-textarea">
                    </div>
                    <div class="uk-form-row">
                        <button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-check"></i> Reply</button>
                        &nbsp;&nbsp;
                        <button type="button" class="uk-button x-cancel"><i class="uk-icon-close"></i> Cancel</button>
                    </div>
                </fieldset>
            </form>
        </div>
</script>

<script>

function initReplyArea(topic_id) {
    console.log('auth success, display reply form...');
    $('#x-reply-area').html($('#tplReplyArea').html());
    var $makeReply = $('#reply-make-button');
    var $replyForm = $('#reply-form');
    var $postReply = $replyForm.find('button[type=submit]');
    var $cancelReply = $replyForm.find('button.x-cancel');
    $makeReply.click(function () {
        $replyForm.showFormError();
        $replyForm.show();
        $replyForm.find('div.x-textarea').html('<textarea></textarea>');
        var htmleditor = UIkit.htmleditor($replyForm.find('textarea').get(0), {
            mode: 'split',
            maxsplitsize: 600,
            markdown: true
        });
        $makeReply.hide();
    });
    $cancelReply.click(function () {
        $replyForm.find('div.x-textarea').html('');
        $replyForm.hide();
        $makeReply.show();
    });
    $replyForm.submit(function (e) {
        e.preventDefault();
        $replyForm.postJSON('/api/topics/' + topic_id + '/replies', {
            content: $replyForm.find('textarea').val()
        }, function (err, result) {
            if (err) {
                return;
            }
            gotoPage({{ page.size }} > {{ replies.length }} ? {{ page.index }} : {{ page.index+1 }});
        });
    });
}

function onAuthSuccess() {
    initReplyArea('{{ topic.id }}');
}

$(function () {
    if (g_user !== null) {
        initReplyArea('{{ topic.id }}');
    }
});

</script>

{% endblock %}

{% block content %}
    <div class="uk-alert x-board-nav">
        <a href="/discuss">{{ _('Discuss') }}</a>
        /
        <a href="/discuss/{{ board.id }}">{{ board.name }}</a>
        /
        {{ topic.name }}
    </div>

    <div class="uk-margin uk-clearfix">
        <a href="/discuss/{{ board.id }}" class="uk-button uk-float-left"><i class="uk-icon-arrow-left"></i> {{ _('Back') }}</a>
    </div>

    <div class="uk-margin">
        <h3 style="display:inline">{{ topic.name }}</h3>
        {% if topic.ref_id %}
        <a target="_blank" href="/{{ topic.ref_type }}/{{ topic.ref_id }}" style="margin-left:1em;">问题来源</a>
        {% endif %}
    </div>

{% set index = page.offset %}
{% for r in replies %}
    {% set index = index + 1 %}
    <div class="uk-comment">
        <div class="x-anchor"><a name="{{ r.id }}"></a></div>
        <div class="uk-comment-header">
            <a href="/user/{{ r.user.id }}"><img class="uk-comment-avatar uk-border-circle x-avatar" src="{{ r.user.image_url }}" width="50" height="50" alt=""></a>
            <h4 class="uk-comment-title"><a href="/user/{{ r.user.id }}">{{ r.user.name }}</a></h4>
            <div class="uk-comment-meta">#{{ index }} Created at <span class="x-smartdate" date="{{ r.created_at }}">...</span></div>
        </div>
        <div class="uk-comment-body uk-margin">
            {% if r.deleted %}
            <div class="alert alert-error">{{ _('This reply was deleted') }}</div>
            {% else %}
            {{ r.content|safe }}
            {% endif %}
        </div>
    </div>
{% endfor %}

    <hr>

    <div class="x-page">
        {{ pagination('?page=PAGE', page) }}
    </div>

    <div class="x-anchor"><a name="reply"></a></div>

    <h3>Reply</h3>

    <div class="x-display-if-not-signin">
        <p><button type="button" class="uk-button" onclick="showSignin()"><i class="uk-icon-signin"></i> Sign In to Make a Comment</button></p>
    </div>

    <div id="x-reply-area"></div>


{% endblock %}

{% block sidebar_right_content %}

{% endblock %}
